function AchievementPopup({ achievement, onClose }) {
    const shareOnTwitter = () => {
        try {
            const formattedDate = new Date(achievement.date).toLocaleDateString('en-US', {
                year: 'numeric',
                month: 'long',
                day: 'numeric'
            });

            const shareText = `🏆 On ${formattedDate}, I reached Level ${achievement.score} in Color Find! Top ${100-achievement.percentile}% that day!\n\n🎮 Think you can beat my score? Try it yourself:\n`;
            const shareUrl = 'https://5jqdmjxdwavv.trickle.host';
            const hashtags = 'ColorFind,ColorGame,BrainTeaser';
            
            const twitterUrl = `https://twitter.com/intent/tweet?text=${encodeURIComponent(shareText)}&url=${encodeURIComponent(shareUrl)}&hashtags=${encodeURIComponent(hashtags)}`;
            
            window.open(twitterUrl, '_blank');
        } catch (error) {
            reportError(error);
        }
    };

    return (
        <div className="fixed inset-0 flex items-center justify-center z-50 p-4" data-name="achievement-popup">
            <div className="absolute inset-0 bg-black/50 backdrop-blur-sm" onClick={onClose}></div>
            <div className="bg-white dark:bg-gray-800 rounded-2xl shadow-xl p-6 max-w-md w-full relative animate-fade-in">
                <button 
                    onClick={onClose}
                    className="absolute top-4 right-4 text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300"
                    data-name="close-button"
                >
                    <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12" />
                    </svg>
                </button>

                <div className="text-center mb-6" data-name="achievement-header">
                    <div className="text-yellow-500 mb-2">
                        <svg className="w-12 h-12 mx-auto" fill="currentColor" viewBox="0 0 20 20">
                            <path fillRule="evenodd" d="M10 2a1 1 0 011 1v1.323l3.954 1.582 1.599-.8a1 1 0 01.894 1.79l-1.233.616 1.738 5.42a1 1 0 01-.285 1.05A3.989 3.989 0 0115 15a3.989 3.989 0 01-2.667-1.019 1 1 0 01-.285-1.05l1.715-5.349L11 6.477V16h2a1 1 0 110 2H7a1 1 0 110-2h2V6.477L6.237 7.582l1.715 5.349a1 1 0 01-.285 1.05A3.989 3.989 0 015 15a3.989 3.989 0 01-2.667-1.019 1 1 0 01-.285-1.05l1.738-5.42-1.233-.616a1 1 0 01.894-1.79l1.599.8L9 4.323V3a1 1 0 011-1zm-5 8.274l-.818 2.552c.25.112.526.174.818.174.292 0 .569-.062.818-.174L5 10.274zm10 0l-.818 2.552c.25.112.526.174.818.174.292 0 .569-.062.818-.174L15 10.274z" clipRule="evenodd" />
                        </svg>
                    </div>
                    <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-1">Previous Achievement!</h2>
                    <p className="text-gray-600 dark:text-gray-400">
                        On {new Date(achievement.date).toLocaleDateString('en-US', {
                            year: 'numeric',
                            month: 'long',
                            day: 'numeric'
                        })}
                    </p>
                </div>

                <div className="space-y-4 mb-6" data-name="achievement-details">
                    <div className="bg-blue-50 dark:bg-blue-900/30 p-4 rounded-xl">
                        <p className="text-3xl font-bold text-blue-600 dark:text-blue-400">
                            Level {achievement.score}
                        </p>
                        <p className="text-blue-800 dark:text-blue-200">
                            Top {100-achievement.percentile}% that day!
                        </p>
                    </div>
                </div>

                <div className="space-y-3" data-name="action-buttons">
                    <button
                        onClick={shareOnTwitter}
                        className="w-full bg-[#1DA1F2] hover:bg-[#1a94e0] text-white font-bold py-3 px-6 rounded-xl transition duration-200 flex items-center justify-center gap-2"
                        data-name="twitter-share-button"
                    >
                        <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                            <path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"/>
                        </svg>
                        Share on Twitter
                    </button>
                    
                    <button
                        onClick={onClose}
                        className="w-full bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 text-gray-800 dark:text-gray-200 font-bold py-3 px-6 rounded-xl transition duration-200"
                        data-name="close-achievement-button"
                    >
                        Close
                    </button>
                </div>
            </div>
        </div>
    );
}
